<template>
  <view class="companyInfoContainer">
    <view class="navigationBar" :style="{ background: propStyles.bgColor }">
      <!-- 状态栏 -->
      <view :style="{ height: statusBarHeight + 'px', width: '100%' }" class="navbar-top">
        <image v-if="propStyles.bgSrc" :src="propStyles.bgSrc" class="bar1Image"></image>
      </view>
      <!-- <view class="navbar-content" :style="{ height: navBarHeight + 'px', width: windowWidth + 'px',color:propStyles.txtColor,background:'url('+propStyles.bgSrc+')' }"> -->
      <view class="navbar-content" :style="{ height: navBarHeight + 'px', width: '100%' }">

        <img class="icon" src="../../static/ucenter/addrIcon.png" alt=""> 
        <!-- <view class="location">{{'南京'}}<span>></span></view> -->

        <uni-data-picker :placeholder="placeholder" popup-title="地区选择" :localdata="regionData" v-model="addr"
          clear-icon="true" @change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened"
          @popupclosed="onpopupclosed">
        </uni-data-picker>
   <img class="icon" src="../../static/ucenter/message.png" alt=""> 
        <view class="inputBox">
          <uni-easyinput class="uni-mt-5" prefixIcon="search" clearable v-model="searchScenicName" placeholder="大闸蟹"
            @iconClick="iconClick" @change="iconClick"></uni-easyinput>

        </view>
        <image v-if="propStyles.bgSrc1" :src="propStyles.bgSrc1" class="bar1Image"></image>

      </view>
    </view>
    <view class="zhanwei"
      :style="{ height: statusBarHeight + navBarHeight + 'px' ,background:propStyles.zhanweiColor }">
    </view>
  </view>
</template>
<script>
  const util = require("@/utils/util.js");
  const api = require("@/utils/api.js");
  const app = getApp();
  export default {
    name: 'customNavigationBar',
    data() {
      return {
        statusBarHeight: 20,
        navBarHeight: 45,
        windowWidth: 375,
        regionData: [],
        addr: '1297',
        placeholder: '苏州',
        searchScenicName: '',
      };
    },
    props: {
      title: null,
      iconSrc: null,
      tapEvent: null,
      propStyles: {
        iconSrc: '',
        bgColor: '',
        txtColor: '',
        bgSrc: '',
        bgSrc1: '',
        zhanweiColor: ''
      }
    },
    methods: {
	  onchange(e){
			const value = e.detail.value;
			
			if (value.length === 2) {
			  this.addr= value[1].value;
			
			}
			
		let val = '';
		if (value[1].text == '市辖区') {
		    val = value[0].text;
		} else {
		    val = value[1].text;
		}	
	  },
      onpopupopened(e) {
        // console.log('popupopened');
      },
      onpopupclosed(e) {
        // console.log('popupclosed');
      },
      onnodeclick(node) {
        // console.log("地址~~~2222", node.text, node.value);
      },
      iconClick() {
        console.log('填写信息~~', this.searchScenicName);
        if (this.searchScenicName === '') {
          this.searchScenicName = "南京海底世界"
        }
        uni.navigateTo({
          url: `/page_ticketSearchResult/ticketSearchResult?key=${this.searchScenicName}`
        })
      },
      goBack() {
        uni.navigateBack()
      },
      goHome() {
        uni.switchTab({
          url: '/pages/index/index',
        })
      },
      getAllArea() {
        console.log("===============getAllArea===============");
        util.request(api.areaTree, {
          "dictKey": "'PROVINCE','CITY'"
        }, 'POST', 'application/json').then(res => {
          if (res.code === 200) {
            //存储用户信息
            //this.regionData = res.data;
            //console.log('地区信息~~',this.regionData);
			
			let province = res.data.province; //
			let city = res.data.city; // provincecode
			let county = res.data.county; //citycode
			
			/*
			for(let i=0;i<county.length;i++){
				county[i].value = county[i].code;
				county[i].text = county[i].name;
			}
			
			for(let i=0;i<city.length;i++){
				city[i].children = Array();
				city[i].value = city[i].code;
				city[i].text = city[i].name;
				for(let j=0;j<county.length;j++){
					if(city[i].code == county[j].citycode){
						city[i].children.push(county[j]);
					}
				}
			}
			*/
		   
		   for(let i=0;i<city.length;i++){
		   	city[i].children = Array();
		   	city[i].value = city[i].code;
		   	city[i].text = city[i].name;
			
			}
			
			for(let i=0;i<province.length;i++){
				province[i].children = Array();
				province[i].value = province[i].code;
				province[i].text = province[i].name;
				for(let j=0;j<city.length;j++){
					if(province[i].code == city[j].provincecode){
						province[i].children.push(city[j]);
					}
				}
			}
			this.regionData = province;
			
			//console.log("->province:"+ JSON.stringify(province))
			
          }
        }).catch((err) => {

          console.log('err', err)

        });

      },



    },

    created() {
      //获取手机系统信息
      const info = uni.getSystemInfoSync();
      //设置状态栏高度
      this.statusBarHeight = info.statusBarHeight;
      this.windowWidth = info.windowWidth;
      // h5 app mp-alipay没有胶囊按钮
      // #ifndef H5 || APP-PLUS || MP-ALIPAY
      // 获取胶囊的位置
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      // (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
      this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
        .statusBarHeight)
      this.windowWidth = menuButtonInfo.left
      // #endif
      this.getAllArea()
    },
    onLoad: function () {
 


    },
    mounted() {
   
    },

  };

</script>

<style lang="scss" scoped>
  .companyInfoContainer {
    box-sizing: border-box;
  }

  .navigationBar {
    width: 100%;
    background: #FFF;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999 !important;

    .navbar-top {
      position: relative;
    }

    .bar1Image {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0rpx;
      left: 0rpx;
    }

    .navbar-content {
      position: relative;
      padding: 0 30rpx;
      box-sizing: border-box;
      display: flex;
      /* justify-content: center; */
      align-items: center;
      height: 45px;

      text {
        width: 50%;
        text-align: center;
      }

   
        .icon {
          width: 48rpx;
          height: 48rpx;

        }

      

      .inputBox {
        height: 72rpx;
        width: 272rpx;
        margin-left: 34rpx;
      }



    }

  }



  .home {
    background-size: 100%;
    width: 36rpx;
    height: 36rpx;
    // margin-right: 10rpx;
    z-index: 999;
  }

  .vertify {
    width: 60rpx;
    height: 60rpx;
    position: absolute;
    left: 32rpx;
  }

  text {
    z-index: 999;
    font-size: 34rpx;
    font-weight: 500;
    text-overflow: ellipsis;
    // width: 150px;
    overflow: hidden;
    white-space: nowrap;
  }


  .zhanwei {
    width: 100%;
  }

  /deep/ .uni-easyinput {

    border-radius: 32rpx;


    border: 1rpx solid #20B7B2 !important;
    border-radius: 52rpx !important;
  }
</style>